<template>
    <div>
        <el-dialog title="答题记录" :visible.sync="dialogVisible" width="900px">
            <el-table :data="currentExamList" v-loading="dialogLoading">
                <el-table-column align="center" label="序号" type="index">
                </el-table-column>
                <el-table-column align="center" label="题干" width="400">
                    <template slot-scope="scope">
                        <el-popover
                            placement="right"
                            width="400"
                            trigger="hover"
                        >
                            <div>
                                <div class="history-preview">
                                    <label>试题内容:</label>
                                    <div>
                                        <p v-html="scope.row.title"></p>
                                    </div>
                                </div>
                                <div class="history-preview">
                                    <label>选项:</label>
                                    <div>
                                        <div
                                            v-for="(data, index) in scope.row
                                                .options"
                                            :key="index"
                                            class="question-content"
                                        >
                                            <div>
                                                <span style="margin-right:5px;"
                                                    >{{ data.item }} .</span
                                                >
                                                <p
                                                    v-if="data.itemDesc"
                                                    v-html="data.itemDesc"
                                                ></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p
                                v-html="scope.row.title"
                                style="cursor: pointer;"
                                slot="reference"
                            ></p>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="用户答案">
                    <template slot-scope="scope">
                        {{ scope.row.userAnswer }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="试题答案">
                    <template slot-scope="scope">
                        {{ scope.row.varAnswer }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="试题解析">
                    <template slot-scope="scope">
                        <span>{{ scope.row.varAnalysis }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="examRecordTotal > 0"
                :total="examRecordTotal"
                :page.sync="currentPage"
                :limit.sync="pageSize"
                @pagination="changePage"
            />
        </el-dialog>
    </div>
</template>
<script>
import { getProjectExamRecord } from '@/api/system/train'
export default {
    name: 'examRecord',
    data () {
        return {
            dialogVisible: false,
            dialogLoading: false,
            examRecordTotal: 0,
            allQuestionArr: [],
            currentExamList: [],
            currentPage: 1,
            pageSize: 10
        }
    },
    props: {
        queryParams: {
            defalut: () => { }
        }
    },
    watch: {
        queryParams () {
            this.getExamDetaile()
        }
    },
    methods: {
        getExamDetaile () {
            let queryParams = this.queryParams
            this.dialogVisible = true
            this.dialogLoading = true
            this.currentExamList = []
            getProjectExamRecord(queryParams).then(res => {
                this.examRecordTotal = res.data.topics.length
                this.allQuestionArr = res.data.topics
                this.currentExamList = this.allQuestionArr.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
                this.dialogLoading = false
            }).catch(() => {
                this.dialogLoading = false
            })
        },
        changePage () {
            this.currentExamList = this.allQuestionArr.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        }
    }
}
</script>
<style scoped>
.varCoverInfo {
    max-width: 100px;
    max-height: 100px;
}
</style>